<template>
	<view>
		<!-- 头部 -->
		<view class=" flex justify-between  bg-white header" style="margin-top: 2upx;">
			<view class="flex justify-between user-avator align-center" >
				<!-- 头像 -->
				<view style="width: 200upx ;height: 200upx;">
					<image :src="userInfo.header" style="height: 200upx;"></image>
				</view>
				<!-- 用户名 -->
				<view  style=" height: 200upx; margin-top: 50upx; margin-left: 20upx;">
						<view class="username" >
							<text>{{userInfo.username}}</text>
							<view class="text-gray cu-tag sm" style="margin-left: 5upx;">白金会员</view>
						</view>
						<view class="flex justify-around">
							<view class="cu-tag round line-gray sm">{{userInfo.mobile}}</view>
							<view class="cu-tag round line-gray sm">会员</view>
						</view>
				</view>
			</view>
			<view class="flex align-center">
				<button :disabled="isLogin" class="cu-btn line-orange" style="font-weight: 500;" @tap="goLogin">登录</button>
			</view>
		</view>
		
		<!-- 月卡 -->
		<view class="bg-white flex justify-center">
			<view class="yueka">
				<view>
					<text style="font-size: 120%; font-weight: 600;" class="text-orange">省钱</text>
					<text style="margin-left: 10upx; margin-right: 10upx;"> | </text>
					<text class="text-orange">水果</text>
				</view>
				<view class="flex align-center">
					<button class="cu-btn round  bg-gradual-orange">优惠券</button>
				</view>
			</view>
		</view>
		
		<!-- 我的订单 -->
		<view class="flex justify-center">
			<view class="bg-white" style="width: 745upx;height: 215upx; border-radius: 20upx; margin-top: 10upx;">
				<!-- 上部 -->
				<view class="flex justify-between" style="padding-right: 20upx;margin-top: 10upx;">
					<view style="font-size: 120%; font-weight: bold;margin-left: 20upx;">我的订单</view>
				</view>
				<!-- 下部 -->
				<view class="flex justify-around align-center" style="margin-top: 20upx;">
					<view style="position: relative; margin-left: -10upx;" class="flex align-center flex-direction" v-for="(item,index) in orders" :key="index" @tap="selectTag(item)">
						<view :class="item.icon" class="myicon" style="color: gray;"></view>
						<view style="position: absolute;top: -3px;right: -7px;"  class="cu-tag bg-red round sm" v-if="item.num!=0">
							{{item.num}}
						</view>
						<view>{{item.text}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 列表 -->
		<view class="flex justify-center">
			<view class="bg-white" style="width: 745upx;border-radius: 20upx; margin-top: 20upx;" >
				<view v-for="(item,index) in list" :key="index" @tap="selectTag(item)">
					<view class="list-item">
						<view :class="item.icon" style="margin-right: 20upx; font-size:150%;"/>
						{{item.text}}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 精选推荐 -->
		<view v-if="goodsList.length!=0" class="bg-white flex justify-center flex-direction" style="width: 745upx;border-radius: 20upx; margin-top: 20upx;">
			<view style="margin-bottom: 5upx; text-align: center; font-size: 150% ; font-weight: bold;" class="text-red flex justify-center"><view class="cuIcon-magic" style="margin-right: 20upx ;font-size: 120%;"></view>精选推荐</view>
			<!-- 商品列表 -->
			<view style="margin-top: 10upx;">
				<view class="flex justify-around bg-white" v-for="(i,index) in goodsList" :key="index" style="padding: 20upx 20upx 20upx 20upx; 
				border-bottom: 0.8upx solid #e7e7e7;" @tap="goDetails(i)">
					<!-- 左部 -->
					<view style="width: 250upx">
						<image :src="i.skuImg" style="width: 250upx; height: 250upx;"></image>
					</view>
					<!-- 右部 -->
					<view style="width: 400upx; height: 350upx; flex-direction: column;">
						<view style="font-weight: bold; font-size: 30upx;">
							<text style="font-weight: 700;" v-html="i.skuTitle"></text>
						</view>
						<view class="cu-tag bg-brown radius" style="margin-top: 20upx;">{{i.catalogName}}</view>
						<view style="margin-bottom: 10upx;">
							<view style="font-size: 200%; margin-top: 20upx; margin-bottom: 20upx;">
								<text class="cu-tag sm bg-red radius">小编推荐</text>
								<text class="cu-tag sm bg-orange radius" style="margin-left: 20upx;">假一赔十</text>
							</view>
							<view style="font-size: 120%;" class="flex justify-between">
								<text style="color: #ff0000;"><text class="text-gray">价格：</text>￥{{i.skuPrice}}</text>
								<text class="text-gray">已买：{{i.saleCount}}</text>
							</view>
							<view style="width: 100%;height: 10upx;"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin:false,
				orders:[
					{
						url:'../order/orderCRM?type=1',
						text:'待付款',
						icon:'cuIcon-pay',
						num:0
					},
					{
						url:'../order/orderCRM?type=3',
						text:'待收货',
						icon:'cuIcon-send',
						num:0
					},
					{
						url:'../order/orderCRM?type=2',
						text:'待评价',
						icon:'cuIcon-comment',
						num:0
					},
					{
						url:'',
						text:'退款/售后',
						icon:'cuIcon-refund',
						num:0
					},
					{
						url:'../order/orderCRM?type=0',
						text:'我的订单',
						icon:'cuIcon-calendar',
						num:0
					}
				],			
				list:[
					{
						text:'我的收藏',
						icon: 'cuIcon-favorfill text-orange',					
						url:''
					},
					{
						text:'退款售后',
						icon: 'cuIcon-refund text-black',					
						url:''
					},
					{
						text:'收获地址',
						icon: 'cuIcon-location text-brown',
						url:'../address/addressCRM'
					},
					{
						text:'退款售后',
						icon: 'cuIcon-phone text-blue',
						url:''
					},
					{
						text:'系统设置',
						icon: 'cuIcon-settingsfill text-cyan',
						url:''
					},
					{
						text:'注销登录',
						icon: 'cuIcon-roundclosefill text-red',
						url:'../user/login'
					}
				]
				,
				userInfo:{
					username:'游客',
					mobile:'xxxxxxxxx'
				},
				goodsList:[]
			}
		},
		
		onLoad(options) {
			this.getUserInfo()
			this.getGoods()
		},
		onPullDownRefresh() {
		    //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		    console.log('refresh')
				this.getUserInfo()
				this.getGoods()
				uni.stopPullDownRefresh();  //停止下拉刷新动画
		},
		methods: {
			goLogin() {
				uni.reLaunch({
					url:'../user/login'
				})
			},
			async getGoods(){
				let res = await this.$request({
					url: 'front/search/list.html',
					params: {
						keyword: '橘'
					},
					methods: 'GET'
				})
				this.goodsList = res.data.product // 刷新页面
			},
			selectTag(item) {
					if(this.userInfo.username != '游客'){
						switch(item.text){
							case '注销登录':
								uni.removeStorage({
										key: 'userInfo',
										success: function (res) {
												console.log('移除用户信息成功！',res);
												uni.reLaunch({
													url:item.url
												})
										},
										fail(res) {
											console.log('注销失败')
										}
								});
								break;
							case '收获地址':
								uni.navigateTo({
									url:`../address/addressCRM?memberId=${this.userInfo.id}`
								})
								break;
							default:
								uni.navigateTo({
									url:item.url
								})
						}
					}else {
						uni.showToast({
								title:'未登录',
								icon:'none'
						})
					}
			},
			
			getUserInfo() {
				var that = this
				uni.getStorage({
					    key: 'userInfo',
					    success: function (res) { 
								that.userInfo = res.data
								that.isLogin = true
					    },
							fail:function(err) {
								that.isLogin = false
								uni.showToast({
										title:'未登录',
										icon:'none'
								})
							}
				});
			},
			
			goDetails(item) {
				uni.navigateTo({
					url:`../goods/goodsDetail?skuId=${item.skuId}`
				})
			},

			goOrders(){
				uni.navigateTo({
					url:'../order/orderList'
				})
			}
		}
	}
</script>

<style>
.header {
	padding-left: 30upx;
	padding-right: 30upx;
}
.user-avator {
	width: 350upx;
	height: 200upx;
}
.username {
	display: flex;
	justify-content: space-around;
	font-weight: bold;
	margin-bottom: 50upx;
}
.yueka {
	width: 700upx;
	height: 80upx;
	background-color: #F2F2F2; 
	border-top-left-radius: 18upx;
	border-top-right-radius: 18upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: green;
	padding-left: 20upx;
	padding-right: 20upx;
}
.myicon {
	font-size: 220%;
	margin-bottom: 10upx;
}
.list-item {
	height: 100upx;
	display: flex;
	align-items: center;
	padding-left: 20upx;
	padding-right: 20upx;
	border-bottom: 1upx solid #DDDDDD;
}
</style>
